<template>
  <div class="wrap">
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="line"></div>
      <div>{{ workData.baseMap?.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosDeparment">{{ workData.baseMap?.depname }}</div>
    </div>
    <div class="center">
      <div class="time">{{ workData.baseMap?.workDateString }}</div>
      <div class="content">
        <div
          class="list"
          :class="{
            active: item.status == -1 || item.availableNumber == -1,
            active2: item.status == 1,
            active3: currentActive == index,
          }"
          v-for="(item, index) in workData.bookingScheduleList"
          :key="index"
          @click="changeActive(index, item)"
        >
          <div class="list_time">
            <span>{{ item.workDate }}</span>
            <span>{{ item.dayOfWeek }}</span>
          </div>
          <!-- 
            status:
              -1 停止挂号
              0 有号 如果availableNumber为-1表示约满了 
              1 即将放号
          -->
          <div class="list_tip">
            <div v-if="item.status == -1">停止挂号</div>
            <div v-if="item.status == 0">
              {{
                item.availableNumber == -1
                  ? "约满了"
                  : `有号(${item.availableNumber})`
              }}
            </div>
            <div v-if="item.status == 1">即将放号</div>
          </div>
        </div>
      </div>
      <el-pagination
        layout="prev, pager, next"
        :total="workData.total"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="bottom">
      <span v-if="workTime.status == 1">即将放号{{ workTime }}</span>
      <div v-else>
        <span>上午号源</span>
        <div class="source" v-for="item in morningData" :key="item.id">
          <div class="left">
            <div class="name">{{ item.title }} / {{ item.docname }}</div>
            <div class="tip">{{ item.skill }}</div>
          </div>
          <div class="right">
            <div class="money">￥{{ item.amount }}</div>
            <el-button type="primary" @click="register(item)">{{
              item.availableNumber
            }}</el-button>
          </div>
        </div>
        <span>下午号源</span>
        <div class="source" v-for="item in afternoonData" :key="item.id">
          <div class="left">
            <div class="name">{{ item.title }} / {{ item.docname }}</div>
            <div class="tip">{{ item.skill }}</div>
          </div>
          <div class="right">
            <div class="money">￥{{ item.amount }}</div>
            <el-button type="primary" @click="register(item)">
              {{ item.availableNumber }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { reqHospitalWork, reqHospitalDectorWork } from "@/api/hospital/index";
import type {
  HopitalWordData,
  DoctorResponseData,
  DoctorArr,
} from "@/api/hospital/type";
let $route = useRoute();
let $router = useRouter();

// 分页器数据
let pageNo = ref<string>("1");
let limit = ref<string>("6");
// 存储医院科室挂号的数据
let workData = ref<any>({});
// 存储医生排班的数据
let doctorWork = ref<DoctorArr>([]);
// 存储第一天的时间
let workTime = ref<any>({});
// 点击切换样式
let currentActive = ref<number>(0);
// 组件挂载完毕发一次请求
onMounted(() => {
  fetchWorkData();
});
// 获取挂号的数据
const fetchWorkData = async () => {
  const result: HopitalWordData = await reqHospitalWork(
    pageNo.value,
    limit.value,
    $route.query.hoscode as string,
    $route.query.depcode as string
  );
  // console.log(result);
  if (result.code == 200) {
    workData.value = result.data;
    // 存储第一天的如期
    workTime.value = result.data.bookingScheduleList[0];
    // 存储完日期以后 获取第一天的数据
    fetchHospitalDectorWork();
  }
};
// 分页器切换页面
const handleCurrentChange = (val: string) => {
  // 改变当前页面
  pageNo.value = val;
  // 重新获取数据
  fetchWorkData();
};
// 点击切换样式
const changeActive = (index: number, item: any) => {
  currentActive.value = index;
  workTime.value = item;
  fetchHospitalDectorWork();
};
// 获取某医院某医生排班
const fetchHospitalDectorWork = async () => {
  let hoscode: string = $route.query.hoscode as string;
  let depcode: string = $route.query.depcode as string;
  let workDate: string = workTime.value.workDate;
  const result: DoctorResponseData = await reqHospitalDectorWork(
    hoscode,
    depcode,
    workDate
  );
  if (result.code == 200) {
    doctorWork.value = result.data;
  }
};
// 计算医生排班 上午 下午
const morningData = computed(() => {
  return doctorWork.value.filter((item) => {
    return item.workTime == 0;
  });
});
const afternoonData = computed(() => {
  return doctorWork.value.filter((item) => {
    return item.workTime == 1;
  });
});
// 点击预约挂号
const register = (item: any) => {
  $router.push({
    path: "/hospital/register_step2",
    query: {
      scheduleId: item.id,
    },
  });
};
</script>

<script lang="ts">
export default {
  name: "Register_step1",
};
</script>
<style scoped lang="scss">
.wrap {
  width: 100%;
  .top {
    color: #7f7f7f;
    display: flex;
    align-items: center;
    .line {
      width: 1px;
      height: 15px;
      background-color: #7f7f7f;
    }
    div {
      margin-right: 10px;
    }
    .dot {
      margin-bottom: 10px;
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    .content {
      width: 100%;
      display: grid;
      // justify-content: space-between;
      // grid-template-columns: repeat(auto-fill, 150px);
      grid-template-columns: repeat(6, 1fr);
      column-gap: 20px;
      margin: 20px 0px;

      .list {
        // flex: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid #4990f2;
        width: 150px;
        height: 80px;

        .list_tip {
          color: #4990f2;
          //   flex: 5;
          height: 35px;
          line-height: 35px;
          text-align: center;
        }
        &.active {
          .list_time {
            background-color: #7f7f7f;
          }
          .list_tip {
            color: #7f7f7f;
          }
          border: 1px solid #7f7f7f;
        }
        &.active2 {
          .list_time {
            background-color: #ccc;
          }
          .list_tip {
            color: #b1b1b1;
          }
          border: 1px solid #ccc;
        }
        &.active3 {
          // border: 1px solid red;
          transform: scale(1.1);
        }
        // transition: transform 0.3s ease;
        transition: all 0.3s ease;
        &:hover {
          transform: scale(1.1);
          cursor: pointer;
        }
        .list_time {
          height: 45px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          background-color: #4990f2;
          color: #fff;
        }
      }
    }
  }
  .bottom {
    span {
      display: block;
      margin: 15px 0;
    }
    .source {
      margin: 10px 0;
      padding: 0 5px;
      height: 50px;
      border-bottom: 1px solid #eee;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .left {
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          font-weight: bold;
        }
        .tip {
          color: #7f7f7f;
        }
      }
      .right {
        width: 20%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
